<template>
	<view>
		<navbar  title="员工列表" :isGoBack="true" :isNotice="true" ></navbar>
	    <view class="new-list-item flex-direction" v-for="(item,index) in list" :key="index"> 
			<view class="item-tagg"> 
			  <view class="item-tag flex"> 
				<image class="mine__bg--avatar" style="background: #FF7906" :src="item.wx_icon"></image>   
				<view class="mrember-info">
					<text class="ml-20">{{item.nickName}}</text> 
					<text class="mt-10 ml-20">{{item.staff_name}}</text>               
					<text class="mt-10 ml-20">{{item.staff_phone}}</text>  
				</view>                                        
			  </view>
			  <view class="ml-30 mt-30">
				   <u-switch v-model="item.staff_status == 0 ? false : true"  asyncChange @change="asyncChange(item)"  ></u-switch>
			  </view> 
			</view>  
		</view>
		
	<!-- 	<button class="price_share" open-type="share" bindtap="showStaff">
		 <text class="share-size" style="margin-top:1rpx;">添加</text>
		 <text class="share-size">员工</text>
		</button> -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[]
			}
	    },		
		onShow() {			
			let that=this
			this.$http.staff_list({
				token:uni.getStorageSync('userInfo').app_openid,
				login_type:'app',
				storageId:uni.getStorageSync('userInfo').storageId,
				}).then(res=>{
			   if(res.resCode=='9999'){
				 that.list=res.data.list
			   }
			})
				
		},
		methods:{
			onPullDownRefresh(){				
				uni.stopPullDownRefresh() // 停止当前页面刷新
			},
			asyncChange(event){				
			   let staff_status=event.staff_status==false?1:0;
			   let  id = event.id				 
			   this.$http.editStaff({id,staff_status}).then(res=>{
					if(res.resCode=='9999'){
						uni.showToast({ title: res.resMessage, icon: 'none' })
						for(var i=0;i<this.list.length;i++){
							if(this.list[i].id==id) this.list[i].staff_status=staff_status?true:false
						}
					}else{
						uni.showToast({ title: res.resMessage, icon: 'none' })
					}
			   })
			}
		}
	}
</script>

<style>
	page{
	  background-color: #f3f6fb;
	}
	/* .inp-box{
	  padding:10rpx 20rpx 10rpx;
	  box-sizing: border-box;
	  position:relative;
	  background-color: #ffffff;
	} */
	.node-tab{
	  background-color: #ffffff;
	  height:88rpx;
	  font-size:28rpx;
	  line-height: 88rpx;
	  display: flex;
	}
	.node-tab .tab-item{
	  flex:1;
	  text-align: center;
	  color: #666;
	}
	.node-tab .active{
	  color: #ff6700;
	  position: relative;
	}
	.node-tab .active::before{
	  position:absolute;
	  content: " ";
	  bottom:10rpx;
	  left: 50%;
	  transform: translateX(-50%);
	  width: 30rpx;
	    height: 6rpx;
	    background-color: #ff6700;
	    border-radius: 3rpx;
	}
	.tab-content{
	  margin-top:20rpx;
	}
	
	.no-data{
	  text-align: center;
	  box-sizing: border-box;
	  padding-top:230rpx;
	  color: #999999;
	}
	
	/* 更新样式 */
	.node-tab {
	  position: relative;
	}
	.new-list-box {
	  height: 100%;
	} 
	.new-list-item {
	  box-sizing:border-box;
	  /* height:260rpx; */
	  position: relative;
	  background-color: #fff;
	  margin-bottom: 20rpx;
	  padding: 20rpx 30rpx 0;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	}
	
	.new-list-item:last-child {
	  margin-bottom: 0;
	}
	
	.new-list-item view {
	  box-sizing: border-box;
	}
	
	.item-content {
	  display: flex;
	  justify-content: space-between;
	  border-bottom: 1rpx solid #eaeaea;
	  align-items: center;
	  position: relative;
	}
	
	.content-left {
	  width: 100%;
	  padding-bottom: 30rpx;
	}
	
	.content-left .content-title {
	  font-size: 32rpx;
	  color: #333;
	}
	
	.content-left .content-des {
	  font-size: 28rpx;
	  color: #666;
	  margin-top: 10rpx;
	}
	
	.content-deadline {
	  font-size: 30rpx;
	  color: #495060;
	  text-align: center;
	}
	
	.content-right {
	  width: 130rpx;
	  flex-shrink: 0;
	  height: 48rpx;
	  border: 1rpx solid #ff6700;
	  color: #ff6700;
	  border-radius: 8rpx;
	  font-size: 24rpx;
	  text-align: center;
	  line-height: 48rpx;
	}
	
	.content-right-is-no {
	  opacity: 0.8;
	  border-color: #999;
	  color: #999;
	}
	
	.item-tag {
	  padding: 10rpx 0 10rpx;
	  font-size: 24rpx;
	}
	
	.list-tag-item {
	  padding: 5rpx 12rpx;
	  text-align: center;
	  background-color: #e5efff;
	  border-radius: 4rpx;
	  margin-right: 10rpx;
	  color: #ff6700;
	  border-radius: 8rpx;
	  margin-bottom: 10rpx;
	  font-size: 24rpx;
	}
	
	.content-right.bg-green {
	  background-color:#e6ffca;
	  border-color: #e6ffca;
	  color:#ff6700;
	  margin-right: 20rpx;
	}
	
	.exchange-btn{
	  text-align: center;
	  margin: 10px 0 0;
	}
	
	.dialog-box{
	  font-size: 28rpx;
	  padding: 30rpx 30rpx 0;
	}
	
	.textarea_css{
	  margin-top: 15rpx;
	  color: #333;
	  height: 160px;
	  border: 1px solid #999;
	  border-radius: 6rpx;
	  padding: 20rpx;
	}
	
	.mine__bg--avatar{
	  width: 90rpx;
	  height: 90rpx;
	  border: 5rpx solid #FFFFFF;
	  border-radius: 50%;
	  margin-top: 10rpx;
	}
	
	.mrember-info{
	  display: flex;
	  flex-direction: column;
	}
	
	.item-tagg{
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	}
	
	.price_share{
	  position: fixed;
	  width: 100rpx;
	  height: 100rpx;
	  background: #2B2C2E;
	  opacity: 0.8;
	  border-radius: 50%;
	  /* background: red; */
	  top: 80%;
	  left: 83%;
	  display: flex;
	  flex-direction: column;
	  font-size: 24rpx;
	}
	
	.share-size{
	/* margin-left: 30rpx; */
	width: 56rpx;
	height: 37rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	}
	

</style>